<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;

        }
        img{
            width: 100%;
        }
        li{
            list-style: none;
            width: 300px;
        }
        ul{
            width: 1200px;
            height: 424px;
            display: flex;
            position: relative;
        }
        div{
            width: 300px;
            height: 424px;
            overflow: hidden;
            position: relative;
        }
        .arrow{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 30px;
            height: 30px;
            font-size: 30px;
            line-height: 30px;
            border: 1px solid;
            border-radius: 50%;

        }
        .arrow-left{
            left: 0;
        }
        .arrow-right{
            right: 0;
        }
        .ind{
            display: flex;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 10%;
            width: 80px;
            justify-content: space-between;
        }
        .ind span{
            width: 15px;
            height: 15px;
            background-color: aqua;
            border-radius: 50%;

        }
        .ind .active{
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>
                <img src="https://s21.ax1x.com/2024/03/13/pFcQdpD.jpg" alt="">
            </li>
            <li>
                <img src="https://s21.ax1x.com/2024/03/13/pFcQUfO.jpg" alt="">
            </li>
            <li>
                <img src="https://s21.ax1x.com/2024/03/13/pFcQNtK.jpg" alt="">
            </li>
            <li>
                <img src="https://s21.ax1x.com/2024/03/13/pFcQtk6.jpg" alt="">
            </li>
        </ul>

        <span onclick="goto('left')" class="arrow arrow-left">←</span>
        <span onclick="goto('right')" class="arrow arrow-right">→</span>
        <!-- 指示器 -->
         <p class="ind">
           

         </p>
    </div>
    <script>
         let index = 0
         let ul = document.querySelector('ul')
         
        // 初始化
        // 生成所需要的指示器元素
        let num = ul.children.length
        let ind = document.querySelector('.ind')
        for (let i = 0; i < num; i++) {
          let span = document.createElement('span')
          if (index==i) {
            // 设置初始化的选中状态
            span.className='active'
          }
          ind.appendChild(span)
        }
        function goto(types) {
            console.log(types);
            console.log(ul.children);
            let max = ul.children.length-1
            if(types=='left'){
                index--
            }else{
                index++
            }
            index= index>max?0:index
            index = index<0?max:index
            console.log(index);
            ul.style.left = (-300*index)+'px' 
            // 修改指示器的样式
            let span = document.querySelectorAll('.ind span')
            span.forEach((item,i)=>{
                item.className = ''
                if (i==index) {
                    item.className = 'active'      
                }
            })
            
        }


    </script>
</body>
</html>